<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>banner-导航区块</title>
    <link rel="stylesheet" type="text/css" href="../css/reset_nec.css"/>
    <style>
    div,ul,li{outline:1px dotted;
       
    }
    div.banner{
         font:14px "microsoft Yahei";
        margin:100px auto 0;
        width:1100px;
        height:600px;

    }
    ul.nav1{
        width:240px;height:100%;
        background:rgba(0,0,0,0.4);
        position:relative;
    }
    ul.nav1 li{
        
        height:42px;
        padding-left:30px;
    }
    ul.nav1 li:hover{
        background: #ff0;
    }
    ul.nav1 li:hover .a1{
        display: block;
    }
    ul.nav1 li a{
        position:relative;
        height: 100%;width:100%;
        line-height: 42px;
        /*padding-left: 30px;*/
        display:inline-block;
        margin:0 0 0 -30px;
        padding:0 0 0 30px;
    }
    ul.nav1 span{
        /*display: inline-block;*/
        /*width:10px;height:10px;line-height: 42px;*/
/*        padding:0 10px;*/
        position:absolute;
        right:24px;
    }
    ul.nav1 .a1{
        width:860px;height:600px;
        background:rgba(0,255,255,0.5);
        position:absolute;
        top:0;left:240px;
        display:none;
    }
    </style>
</head>
<body>
    <div class="banner">
        <ul class="nav1">
            <li>
                <a href="#">手机&nbsp;电话卡
                    <span>&gt;</span>
                </a>
                <div class="a1"></div>   
            </li>
            <li>
                <a href="#">笔记本&nbsp;平板
                    <span>&gt;</span>
                </a>
                <div class="a1"></div> 
            </li>
            <li>
                <a href="#">电视&nbsp;盒子
                    <span>&gt;</span>
                </a>    
                <div class="a1"></div>             
            </li>
            <li>
                <a href="#">路由器&nbsp;只能硬件
                     <span>&gt;</span>
                </a>    
                <div class="a1"></div>            
            </li>
            <li>
                <a href="#">移动电源&nbsp;电池&nbsp;插线板
                    <span>&gt;</span>
                </a> 
                <div class="a1"></div>                
            </li>
            <li>
                <a href="#">移动电源&nbsp;电池&nbsp;插线板
                    <span>&gt;</span>
                </a>    
                <div class="a1"></div>             
            </li>
            <li>
                <a href="#">移动电源&nbsp;电池&nbsp;插线板
                    <span>&gt;</span>
                </a>  
                <div class="a1"></div>               
            </li>
            <li>
                <a href="#">移动电源&nbsp;电池&nbsp;插线板
                    <span>&gt;</span>
                </a>   
                <div class="a1"></div>              
            </li>
        </ul>
       <ul>
           <li></li>
           <li></li>
           <li></li>
           <li></li>
           <li></li>
       </ul>
    </div>
</body>
</html>